<template>
    <div class="delivery">
        <div class="loadiv" v-if="isModal">
            <smalloading class="loading"></smalloading>
        </div>
        <div class="nav" v-if="isShow">
            <div class="return" v-on:click="back()">
                <span class="arrow"></span>
                <span class="back">返回</span>
            </div>
            <div class="nav_text">
                <p>补货管理</p>
            </div>
        </div>
        <div class="pop" v-if="check_num">
            <div class="check_num">
                <div class="title_pop">
                    <p>{{detail_inp.productName}}</p>
                    <p>配送数量：{{detail_inp.quantity}}</p>
                </div>
                <div class="margin">
                    <span style="display:inline;font-size:13px;margin-left:-20px">打印条码数量</span><input type="number" style="width:110px;margin-left:10px" placeholder='打印条码数量' v-model="model[0].pop_inp" />
                </div>

                <button class="affirm" @click="queding">确认</button>
                <button class="cancel" @click="quxiao">取消</button>

            </div>
            <div class="mask">

            </div>
        </div>
        <div class="body" v-if="isShow">
            <ul>
                <li>
                    <span class="left">ERP订单号：</span>
                    <span class="right">{{goods.originalOrderId}}</span>
                </li>
                <li>
                    <span class="left">供应商名称：</span>
                    <span class="right">{{goods.supplierName}}</span>
                </li>
                <li>
                    <span class="left">发货日期&ensp;&ensp;：</span>
                    <span class="right">{{goods.deliveryTime}}</span>
                </li>

            </ul>
        </div>
        <div class="detail" v-if="isShow">
            <ul v-for="item in warehouse" :key="item.id" @click="pro(item)">
                <li>
                    <span class="left">商品编码：</span>
                    <span class="right">{{item.productCode}}</span>
                </li>
                <li >
                    <span class="left">货位编号：</span>
                    <span class="right">{{item.cscode}}</span>
                </li>
                <li v-show="item.productName.length < 25">
                    <span class="left">商品名称：</span>
                    <span class="right">{{item.productName | format_str}}</span>
                </li>
                <li v-show="item.productName.length >= 25">
                    <span class="left">商品名称：</span>
                    <p class="right_">{{item.productName}}</p>
                </li>
                <li>
                    <span class="left">计量单位：</span>
                    <span class="right">{{item.unit}}</span>
                </li>
                <li>
                    <span class="left">配送数量：</span>
                    <span class="right">{{item.quantity}}</span>
                </li>
                <li>
                    <span class="left">打印条码数量：</span>
                    <span class="right">{{item.scanNum}}</span>
                </li>
            </ul>
        </div>
        <div class="btnContainer" v-if="isShow">
            <button type="submit" class="SubmitBtn" v-if="deliverySent_show" v-on:click="acceptSupDelivery()">确认入库</button>
            <button type="button" class="Submit act_" v-on:click="takeIP()">打印商品条码</button>
        </div>
    </div>
</template>
<script>
import "./../../../static/js/JsBarcode.all";
import smalloading from "./../loading/smalloading";
export default {
  name: "delivery",
  data() {
    return {
      check_num: false,
      model: [{ pop_inp: 0 }],
      detail_inp: "",
      warehouse: [],
      goods: {},
      isModal: false,
      isShow: false,
      deliverySent_show: false
    };
  },
  components: {
    smalloading
  },
  methods: {
    back: function() {
      this.$router.push({ path: "/DeliveryScan" });
    },
    pro: function(res) {
      this.check_num = true;
      this.detail_inp = res;
      this.model[0].pop_inp = parseInt(res.quantity - 0);
    },
    quxiao: function() {
      this.check_num = false;
      this.model[0].pop_inp = 0;
    },
    queding: function() {
      let res = this.detail_inp;
      let v = this.model[0].pop_inp;
      if (v - 0 > res.quantity - 0) {
        this.$layer.alert("当前数量大于总量");
        return;
      }
      this.warehouse.map(item => {
        // console.log(item)
        if (item.productCode.includes(res.productCode)) {
          item.scanNum = v;
        }
      });
      this.check_num = false;
    },
    prompt(res) {
      // console.log(res)
      /* if (!this.deliverySent_show) {
                return;
            } */
      this.$prompt("", {
        title: res.productName,
        placeholder: "输入数量",
        value: parseInt(res.quantity - 0)
      }).then(v => {
        //console.log(v)
        /***************************************************** */
        if (v == "" || !Number(v)) {//判断空 或者 不是数字类型
          this.$layer.alert("输入有误");
          return;
        }
        if(parseInt(v) != (v - 0)){//判断小数时
          this.$layer.alert("输入有误");
          return;
        }
        if ((v - 0) < 0 ) {//判断小于0时候
          this.$layer.alert("输入有误");
          return;
        }
        /******************************************************* */
        if (v - 0 > res.quantity - 0) {
          this.$layer.alert("当前数量大于总量");
          return;
        }
        this.warehouse.map(item => {
          console.log(item);
          if (item.productCode.includes(res.productCode)) {
            item.scanNum = v;
          }
        });
      });
    },
    load_list: function() {
      //入库单编码 S012496 S012497 采购入库可以用这些：S012642~S012652
      this.$http
        .post("api/motor/getSupDeliveryInfo", {
          deliveryId: sessionStorage.getItem("qrcode"),
          storcode: localStorage.getItem("storcode")
        })
        .then(
          res => {
            this.isModal = false;
            if (res.data.code == 101) {
              this.isModal = false;
              this.$layer.alert("当前用户已在其他设备登录");
              this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (res.data.code == 0) {
              let this_ = this;
              let rot = this.$router;
              //console.log(res.data)
              this_.$layer.alert(res.data.errorMessage, function() {
                this_.$layer.close(this.id);
                rot.push({ path: "/DeliveryScan" });
              });
              return;
            }
            this.isShow = true;
            let result = res.data;
            console.log(result, "result");
            //判断状态是否为deliverySent 如果是 则显示确认入库按钮
            if (result.receiveStatus == "deliverySent") {
              this.deliverySent_show = true;
            }
            sessionStorage.removeItem("qrcode");
            this.goods = result;
            this.warehouse = result.product_list;
          },
          err => {
            this.isModal = false;
            this.$layer.alert("未知错误");
            this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
    },
    takeIP: function() {
      //判断ip在local是否存在
      let this_ = this;
      let ip_address = localStorage.getItem("ip_address");
      if (ip_address && ip_address.length > 5) {
        for (let i = 0; i < this_.warehouse.length; i++) {
          console.log(this_.warehouse[i].scanNum);
          for (let j = 0; j < this_.warehouse[i].scanNum; j++) {
            this_.putQr(ip_address, this_.warehouse[i].productCode);
          }
        }
      } else {
        this_.$layer.alert("请先设置打印机的IP和端口号", function() {
          this_.$layer.close(this.id);
        });
      }
    },
    putQr: function(ip_addr, qr_code) {
      let url = "http://" + ip_addr + "/pstprnt";
      let zpl = "^XA";
      zpl += "^PW384";
      zpl += "^MD10";
      zpl += "^LH0,30";
      zpl += "^FO30,0^BY2.0,2.0^BCN,120,Y,N,N,A^FD" + qr_code + "^FS";
      zpl += "^PQ1,0,1,Y";
      zpl += "^XZ";

      let request = new XMLHttpRequest();
      request.onreadystatechange = this.callback_print(request);
      request.onload = function() {
        let status = request.status;
        console.log(status);
        let data = request.responseText;
      };

      request.open("POST", url, true);
      request.send(zpl);
      // if (window.print) {
      // this.warehouse.map((item, i) => {
      //     for (var j = 0; j < item.scanNum; j++) {
      //         document.write('<canvas class="canvas' + j + '"></canvas>');
      //         $(".canvas" + j).JsBarcode(item.productCode);
      //     }
      // });
      //document.write('<form>' + '<input type=button name=print value="打印页面" ' + 'onClick="javascript:window.print()"></form>');
      // }
      // window.print();
    },
    callback_print: function(res) {
      console.log(res);
    },
    acceptSupDelivery: function() {
      let layer = this.$layer;
      let _this = this;
      // layer.confirm("确认入库？", function() {
      //     layer.close(this.id)
      _this.isModal = true;
      _this.$http
        .post("api/motor/acceptSupDelivery", {
          data: _this.goods,
          storcode: localStorage.getItem("storcode")
        })
        .then(
          res => {
            _this.isModal = false;
            let rot = _this.$router;
            if (res.code == 101) {
              _this.isModal = false;
              _this.$layer.alert("当前用户已在其他设备登录");
              _this.$router.push({ path: "/" });
              localStorage.removeItem("authorization");
              return;
            }
            if (res.data.code == 0) {
              _this.isModal = false;
              _this.$layer.alert(res.data.msg, function() {
                _this.$layer.close(this.id);
                // rot.push({ path: "/DeliveryScan" });
              });
              return;
            }
            if (res.data.code == 1) {
              _this.isModal = false;
              _this.$layer.alert("确认补货成功", function() {
                _this.$layer.close(this.id);
                rot.push({ path: "/DeliveryScan" });
              });
              return;
            }
          },
          err => {
            _this.isModal = false;
            _this.$layer.alert("未知错误");
            _this.$router.push({ path: "/" });
            localStorage.removeItem("authorization");
          }
        );
      // })
      // _this.isModal = false;
    }
  },

  created: function() {
    this.isModal = true;
    this.load_list();
  }
};
</script> 

<style lang="css" scoped>
.pop_width {
  width: 300px;
}

.title_pop {
  font-size: 1.3rem;

  margin-top: 1rem;
}

.title_pop p {
  word-wrap: break-word;
  margin: 0.5rem 1rem 0 1rem;
  padding-left: 15px;
}

.margin {
  margin-top: 1rem;
  text-align: center;
}

.right_ {
  width: 220px;
  word-break: break-all;
  display: inline-flex !important;
}

.mask {
  z-index: 4;
  left: 0;
  position: fixed;
  top: 0;
  opacity: 0.4;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}

.check_num {
  width: 80%;
  background-color: #fff;
  position: fixed;
  z-index: 8;
  margin-left: 10%;
  margin-top: 40%;
  border-radius: 0.5rem;
}

.check_num label {
  font-size: 15px;
}

.check_num input {
  width: 80%;
  font-size: 15px;
  height: 3rem;
  padding-left: 4%;
  margin-top: 5px;
  border: 1px solid #d3dce6;
  border-radius: 6px;
  background: #f9fafc;
}

.check_num span {
  font-size: 15px;
  text-align: -webkit-center;
  display: -webkit-box;
}

.affirm {
  display: inline-block;
  background: #668292;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 2.7rem;
  outline: none;
  font-size: 1.5rem;
}

.cancel {
  display: inline-block;
  background: #fff;
  width: 30%;
  height: 3.4rem;
  border-radius: 6px;
  border: 1px solid #668292;
  color: #668292;
  font-weight: bold;
  padding: 0.5rem 0;
  margin: 17px;
  outline: none;
  font-size: 1.5rem;
}

.loadiv {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  /* background-color: gray; */
  /* opacity: 0.1; */
}

.loading {
  margin: 70% auto;
  z-index: 100;
}

.title {
  padding-top: 1rem;
  height: 3.5rem;
  background: #fff;
  box-shadow: 0px 0px 10px #333;
  text-align: -webkit-center;
}

.btn {
  width: 70%;
  background: #fcfcfc;
  border: 1px solid #dcdada;
  border-radius: 1rem;
  color: #49a1de;
}

.body {
  margin: 1rem 0rem;
  background: #fff;
}

.body ul {
  margin: 0 1rem;
}

.body li:last-child {
  border: none;
}

.body li {
  font-size: 1.3rem;
  color: gray;
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #e5e3e3;
}

.body .right {
  float: right;
}

.maxheight {
  font-size: 1.3rem;
  color: gray;
  min-height: 3rem !important;
  line-height: 3rem;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  min-height: 2rem;
  line-height: 2rem;
}

.btnContainer {
  padding-bottom: 3rem;
  width: 100%;
  position: fixed;
  bottom: 0%;
  text-align: center;
  padding: 0.83rem 0;
}

.btnContainer .SubmitBtn {
  background: #668292;
  width: 37%;
  height: 3.2rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 15px;

  padding: 0.5rem 0;
  outline: none;
  margin: 0 0.5rem;
}

.btnContainer .Submit {
  background: #d3d3d3;
  width: 37%;
  height: 3.2rem;
  border-radius: 6px;
  border: none;
  color: #fff;
  font-size: 15px;

  padding: 0.5rem 0;
  outline: none;
  margin: 0 0.5rem;
}

.act_:active {
  background-color: #668292;
}

.detail {
  margin: 1rem 0;
  background: #fff;
}

.detail ul {
  margin-top: 1rem;
  box-shadow: 0px 0px 15px #999;
}

.detail li {
  font-size: 1.3rem;
  color: gray;
  height: 2rem;
  line-height: 2rem;
}

.detail .left {
  padding: 0 0.8rem;
  display: inline-block;
  /* width: 65%; */
}

.detail .right {
  float: right;
  margin-right: 10px;
}

.right_ {
  width: 230px;
  word-break: break-all;
  display: inline-flex !important;
}

.mar {
  width: 65%;
}

.arrow {
  border: 0.15rem solid #fff;
  border-width: 0.15rem 0 0 0.15rem;
  display: inline-block;
  height: 0.85rem;
  width: 0.85rem;
  -webkit-transform-origin: center center;
  -webkit-transform: rotate(135deg);
  -webkit-transition: all 0.5s ease-in 0.1s;
  transform-origin: center center;
  transform: rotate(-45deg);
  transition: all 0.5s ease-in 0.1s;
}

.return {
  padding-left: 1.5rem;
  width: 44%;
}

.back {
  font-size: 1.3rem;
  color: #fff;
}

.nav {
  line-height: 4rem;
  display: -webkit-box;
  background: #668292;
  height: 4rem;
}

.nav_text {
  font-size: 1.6rem;
  color: #fff;
}
</style>
   